import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
  Row, Col, Card, Form, Input, Select, Icon,
  Button, Dropdown, Menu, InputNumber,
  DatePicker, Modal, message, Badge,
  Divider, Tag, Table, Checkbox
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { routerRedux } from 'dva/router';
import styles from './RoleList.less';
import querystring from 'querystring';
/*
 角色列表界面
*/

const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

@connect(({ role }) => ({
  role,
}))
@Form.create()
export default class RoleList extends PureComponent {
  state = {
    id: '',
    roleIdList: [],
    jobsRoleList: [],
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
    });
    dispatch({
      type: 'role/fetch',
      payload: {
        offset: 0,
        limit: 10,
      }
    });
    // dispatch({
    //   type: 'role/jobsDetails',
    //   payload: {
    //     postId: params.id,
    //   },
    //   callback: () => {
    //     const { role: { jobsRoleList } } = this.props;
    //     // console.log("jobsRoleList121", jobsRoleList)
    //     for (let i = 0; i < jobsRoleList.length; i++) {
    //       this.state.roleIdList.push(jobsRoleList[i])
    //       // jobsRoleList &&
    //       // this.setState({
    //       //   roleIdList: jobsRoleList[i].id,
    //       //   // jobsRoleList: jobsRoleList
    //       // })
    //     }
    //     // console.log("roleIdList", this.state.roleIdList)
    //   }
    // });  
  }

  handleStandardTableChange = (pagination) => {
    this.props.dispatch({
      type: 'role/fetch',
      payload: {
        offset: (pagination.current - 1) * pagination.pageSize,
        limit: pagination.pageSize
      },
    });
  }

  hanleClickRoleList = (e) => {
    // console.log("this.state.roleIdList)");
    // console.log(this.state.roleIdList);
    const roleIdList1 = []
    for (const i in this.state.roleIdList) {
      const id = ''
      id = this.state.roleIdList[i].id
      roleIdList1.push(id)
    }
    // console.log(roleIdList1);
    this.props.dispatch({
      type: 'role/roleSave',
      payload: {
        postId: this.state.id,
        roleIdList: roleIdList1
      },
      callback: (code) => {
        if (code == "200") {
          message.success('提交成功');
          this.props.dispatch(routerRedux.push(`/system/jobs-details?id=${this.state.id}`));
        } else {
          message.error(response.result.message);
        }
      },
    });
  }

  columns = [{
    key: 'roleName',
    title: '角色名',
    dataIndex: 'roleName',
  }, {
    key: 'remark',
    title: '角色描述',
    dataIndex: 'remark',
  }];

  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(selectedRows.id) 
      this.setState({
        roleIdList: selectedRows,
      });
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // this.setState({
      //   roleIdList: selectedRows,
      // });
    },
  };

  render() {
    const { role: { roleList, page, loading } } = this.props;
    return (
      <PageHeaderLayout title="角色列表">
        <Card bordered={false}>
          {
            this.state.roleIdList &&
            <div className={styles.tableList}>
              {/* {this.state.jobsRoleList[0]&&JSON.stringify(this.state.jobsRoleList[0].id)}aaa */}
              {/* {JSON.stringify(this.state.roleIdList)}aaa */}
            <Table
                columns={this.columns}
                dataSource={roleList}
                pagination={page}
                bordered
                rowKey="id"
                rowSelection={this.rowSelection}
                onChange={this.handleStandardTableChange}
              />
              <div className={styles.tableListOperator}>
                <Button type="primary" onClick={this.hanleClickRoleList}>
                  提交
                </Button>
              </div>
            </div>
          }

        </Card>
      </PageHeaderLayout>
    );
  }
}
